<template>
  <div style="background-color: #ffffff;">
    <!-- <HeadNav :title="`${detailsBox.date!==undefined?detailsBox.date : currentDate }填报统计`"></HeadNav> -->
    <div class="content">
      <div class="pageTop">
        <div class="pageTop-left" @click="showReport(1)" :class="{'pageTop_act':currentType===1}">
          <img src="../../assets/images/library_left.png" alt="">
          <div class="middle_text left_text_position">
            <div class="middle_text_num">{{ detailsBox.reportList?detailsBox.reportList.length:0 }}</div>
            <div class="middle_text_name">已填报</div>
          </div>
        </div>
        <div class="pageTop-right" @click="showReport(2)" :class="{'pageTop_act':currentType===2}">
          <img src="../../assets/images/library_right.png" alt="">
          <div class="middle_right_text">
            <div class="middle_text_num">{{ detailsBox.notReportList?detailsBox.notReportList.length:0 }}</div>
            <div class="middle_text_name">未填报</div>
          </div>
        </div>
      </div>
      <div class="content_Title">
        <div class="content_Title_text">{{ title }}档口（{{ sumNum }}）</div>
        <div class="endTime">截止{{ detailsBox.current }}</div>
      </div>
      <template v-if="currentType === 1">
        <div class="content_Item_List" v-if="dataList.length > 0">
          <div class="recordItem" v-for="(item, index) in dataList" :key="index" @click="toCheckedDetail(item, index)">
            <div class="recordItem_bg">
                <div class="recordItemL">
                    <div class="recordItemL-left"><img :src="require('../../assets/images/recordIcon.png')"
                            alt=""></div>
                    <div class="recordItemL-right">
                        <div class="recordItemL-right-text">{{ item.stallName }}</div>
                        <div class="recordItemL-right-text" style="margin-top: 8px;">{{ item.reportTime }}</div>
                    </div>
                </div>
                <div class="recordItemR">
                    <div class="recordItemR-left">
                        <div class="recordItemR-left-num">共{{
                            item.reportChildList ? item.reportChildList.length : 0 }}项产品</div>
                        <div class="recordItemR-left-price" style="margin-top: 8px;">合￥{{ item.amount }}
                        </div>
                    </div>
                    <div class="recordItemR-right" @click.stop="toCheckedDetail(item, index)">
                        <van-icon :name="item.isTag ? 'arrow-up' : 'arrow-down'" size="11" />
                    </div>
                </div>
            </div>
            <div class="details_box" v-if="item.isTag">
                <div class="goods-box" v-for="(ele, val) in item.reportChildList" :key="val" :id="val">
                    <div class="goods-title">{{ ele.materialName }}({{
                        ele.specification ? ( ' ' + ele.specification + '/ '):' ' }}{{ ele.unit ? (' ' + ele.unit + '/ ') : "" }} {{' ￥'+ ele.price}})
                    </div>
                    <div class="goods-num">
                        <div class="selectnum">{{ ele.num }}</div>
                    </div>
                </div>
            </div>
          </div>
        </div>
      </template>
      <template v-if="currentType === 2">
        <div class="content_Item_List" v-if="dataList.length > 0">
          <div class="content_Item" v-for="(item, index) in dataList" :key="index">
            <div class="content_Item_left">
              <div class="item_img"><img src="../../assets/images/recordIcon.png" alt=""> </div>
              <div class="content_Item_name">{{ item.stallName }}</div>
            </div>
            <div class="content_Item_right" @click="copyText(title)"><img src="../../assets/images/phoneIcon.png" alt=""
                style="width: 12px;height: 12px;margin-right: 6px;"> {{ item.principalPhone? item.principalPhone : title }}</div>
          </div>
        </div>
      </template>
      <div class="empty_content" v-if="!loadStatus && dataList.length==0">
        当前暂无数据
      </div>
    </div>
    <foot></foot>
  </div>
</template>

<script>
/* eslint-disable */
// import { getApplyCertificationPagePho, getVerifyTypeList } from '@/api/api'
import { getParams } from '@/common/public'
import HeadNav from '@/components/HeadNav'
import { managerStatistics } from '@/api/manager'
import foot from '../foot/foot.vue'
import { Toast } from 'vant';
// import moment from 'moment'
// import { mapState } from 'vuex'
export default {
  name: 'Library',
  components: {
    HeadNav,
    foot
  },
  watch: {
    active(newVal) {
      // console.log('newVal', newVal)
      // if (newVal === 0) {
      //   this.params.applyType = null
      //   this.loading = true
      //   this.contentData = []
      //   this.finished = false
      //   if (!this.finished) {
      //     this.onLoad(1)
      //   }
      // } else {
      //   this.params.applyType = newVal
      //   this.loading = true
      //   this.contentData = []
      //   this.finished = false
      //   if (!this.finished) {
      //     this.onLoad(1)
      //   }
      // }
    }
  },
  data() {
    return {
      active: 0,
      detailsBox: {},
      isSubmit: false,
      title:'未填报',
      dataList:0,
      sumNum:0,
      params: {

      },
      currentDate:'',
      loadStatus:true,
      currentType:1,
      recordList:undefined,
    }
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if(to.query.item!==undefined){
        vm.localData = JSON.parse(to.query.item)
        console.log(vm.isSubmit, 'ppppppppppuiuuuuu')
        vm.isSubmit = vm.localData.isSubmit
        console.log(vm.isSubmit)
        //   this.navBarTitle= vm.params.date + '申报明细'
      }else{
        vm.isSubmit=false
      }
    
    })
  },
  mounted() {
    this._managerStatistics()
    
    document.title=`${this.detailsBox.date!==undefined ? this.detailsBox.date : this.currentDate }填报统计`
    // window.onPageFinished = this.onPageFinished
    // this.$bridge.registerhandler('onPageFinished')
    // Android端
    // window.android.showToast('展示内容提示')
    // window['onPageFinished'] = (data) => {

    // const u = navigator.userAgent
    // const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 // g
    // const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
    // if (isAndroid) {
    //   window.android.hideToolbar()
    //   window.android.setEnableSwipeBack(true)
    // }
    // if (isIOS) {
    //   var s = {}
    //   this.$bridge.callhandler('hideToolbar', s, (data) => { })
    // }
    // // }
  },
  created() {
    // 当天日期
    const timestamp = new Date().getTime()
    const date = new Date(timestamp)
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    this.currentDate = `${year}-${month}-${day}`
    console.log(this.currentDate,'this.currentDate')
    // // 保存token
    // // localStorage.setItem('Authorization', '')
    // const Authorization = getParams('access_token')
    // this.$store.commit('applyrecords/setToken', Authorization)
    // // this.$store.state.area.areaSelect
    // console.log(
    //   'this.$store.state.applyrecords.token',
    //   this.$store.state.applyrecords.token
    // )
    // console.log(Authorization)
    // console.log(location.href)
    // localStorage.setItem('Authorization', Authorization)
    // if (!sessionStorage.getItem('Authorization')) {
    //   sessionStorage.setItem('Authorization', Authorization)
    // }

    // console.log(sessionStorage.getItem('Authorization'))

  },
  methods: {
    // 切换页面顶部 已填报  未填报
    showReport(index){
      this.currentType=index
      if(index ==1){
        this.title = '已填报'
        this.sumNum = this.detailsBox.reportList.length
        this.dataList = this.detailsBox.reportList
        
        // return false
      }else{
        this.title = '未填报'
        this.sumNum = this.detailsBox.notReportList.length
        this.dataList = this.detailsBox.notReportList
      }
      this.loadStatus=false
    },
    // 接口
    _managerStatistics(){
      this.loadStatus=true
      managerStatistics().then(res =>{
        console.log(res)
        if(res.code==200){
          this.detailsBox = res.data
          this.detailsBox.reportList.forEach(ele => {
            this.$set(ele, 'isTag', false)
          })
          // this.recordList=[
          //   {
          //     stallName:'一到八档口',
          //     inTime:'2024.01.26 16:30:26',
          //     inAmount:'120.00',
          //     reportChildList:[
          //       {
          //         materialName:'新东大鸡排',
          //         num:3,
          //         specification:'袋',
          //         unit:'20公斤',
          //         price:'40'
          //       },
          //       {
          //         materialName:'新东大鸡排',
          //         num:3,
          //         specification:'袋',
          //         unit:'20公斤',
          //         price:'40'
          //       },
          //       {
          //         materialName:'新东大鸡排',
          //         num:3,
          //         specification:'袋',
          //         unit:'20公斤',
          //         price:'40'
          //       }
          //     ]
          //   },
          //   {
          //     stallName:'一到八档口',
          //     inTime:'2024.01.26 16:30:26',
          //     inAmount:'120.00',
          //     reportChildList:[
          //       {
          //         materialName:'新东大鸡排',
          //         num:3,
          //         specification:'袋',
          //         unit:'20公斤',
          //         price:'40'
          //       },
          //       {
          //         materialName:'新东大鸡排',
          //         num:3,
          //         specification:'袋',
          //         unit:'20公斤',
          //         price:'40'
          //       },
          //       {
          //         materialName:'新东大鸡排',
          //         num:3,
          //         specification:'袋',
          //         unit:'20公斤',
          //         price:'40'
          //       }
          //     ]
          //   },
          //   {
          //     stallName:'一到八档口',
          //     inTime:'2024.01.26 16:30:26',
          //     inAmount:'120.00',
          //     reportChildList:[
          //       {
          //         materialName:'新东大鸡排',
          //         num:3,
          //         specification:'袋',
          //         unit:'20公斤',
          //         price:'40'
          //       },
          //       {
          //         materialName:'新东大鸡排',
          //         num:3,
          //         specification:'袋',
          //         unit:'20公斤',
          //         price:'40'
          //       },
          //       {
          //         materialName:'新东大鸡排',
          //         num:3,
          //         specification:'袋',
          //         unit:'20公斤',
          //         price:'40'
          //       }
          //     ]
          //   },
          //   {
          //     stallName:'一到八档口',
          //     inTime:'2024.01.26 16:30:26',
          //     inAmount:'120.00',
          //     reportChildList:[
          //       {
          //         materialName:'新东大鸡排',
          //         num:3,
          //         specification:'袋',
          //         unit:'20公斤',
          //         price:'40'
          //       },
          //       {
          //         materialName:'新东大鸡排',
          //         num:3,
          //         specification:'袋',
          //         unit:'20公斤',
          //         price:'40'
          //       },
          //       {
          //         materialName:'新东大鸡排',
          //         num:3,
          //         specification:'袋',
          //         unit:'20公斤',
          //         price:'40'
          //       }
          //     ]
          //   },
          //   {
          //     stallName:'一到八档口',
          //     inTime:'2024.01.26 16:30:26',
          //     inAmount:'120.00',
          //     reportChildList:[
          //       {
          //         materialName:'新东大鸡排',
          //         num:3,
          //         specification:'袋',
          //         unit:'20公斤',
          //         price:'40'
          //       },
          //       {
          //         materialName:'新东大鸡排',
          //         num:3,
          //         specification:'袋',
          //         unit:'20公斤',
          //         price:'40'
          //       },
          //       {
          //         materialName:'新东大鸡排',
          //         num:3,
          //         specification:'袋',
          //         unit:'20公斤',
          //         price:'40'
          //       }
          //     ]
          //   },
          //   {
          //     stallName:'一到八档口',
          //     inTime:'2024.01.26 16:30:26',
          //     inAmount:'120.00',
          //     reportChildList:[
          //       {
          //         materialName:'新东大鸡排',
          //         num:3,
          //         specification:'袋',
          //         unit:'20公斤',
          //         price:'40'
          //       },
          //       {
          //         materialName:'新东大鸡排',
          //         num:3,
          //         specification:'袋',
          //         unit:'20公斤',
          //         price:'40'
          //       },
          //       {
          //         materialName:'新东大鸡排',
          //         num:3,
          //         specification:'袋',
          //         unit:'20公斤',
          //         price:'40'
          //       }
          //     ]
          //   }
          // ]
          // this.recordList.forEach(ele=>{
          //   this.$set(ele,'isTag',false)
          // })
          this.showReport(1)
        }else{
          Toast(res.message)
        }
      })
    },
    //  已填报明细
    toCheckedDetail(item, val) {
      item.isTag = !item.isTag
    },
    // 复制手机号码
    copyText(text) {
        // 创建一个临时的 textarea 元素
        const textarea = document.createElement('textarea');
        textarea.value = text;
        document.body.appendChild(textarea);
        // 选中 textarea 中的内容
        textarea.select();
        // 执行复制命令
        document.execCommand('copy');
        // 移除临时的 textarea 元素
        document.body.removeChild(textarea);
        // alert('内容已复制：' + text);
        Toast('复制成功')
    },
    // fuzhi'
    async copyText(text) {
        try {
            // 使用 Clipboard API 复制文本
            await navigator.clipboard.writeText(text);
            alert('内容已复制：' + text);
        } catch (err) {
            console.error('复制失败：', err);
        }
    },

    toCheck() {
      this.$router.push({ path: '/selectFillIn' })
    }
  },
  beforeDestroy() {
    console.log('index')
    window.removeEventListener('scroll', this.onLoad, true)
  }
}
</script>

<style lang="less" scoped>
span,
p {
  padding: 0;
  margin: 0;
}


.content {
  overflow: hidden;
  // margin-bottom: 10px;
  padding-bottom: 50px;
  // height: calc(100vh - 60px);
  // height: 100vh;
}

.pageTop {
  display: flex;
  align-items: center;
  padding-top: 14px;
  // margin-top: 60px;  //headNav使用时，不注释
  justify-content: space-between;
  padding-left: 24px;
  padding-right: 24px;
  position: fixed;
  width: calc(100% - 48px);
  background-color: #ffffff;
  z-index: 100;

  .pageTop-left {
    width: calc((100% - 24px)/2);
    height: 115px;
    border-radius: 20px;
    background: #e9f2f7;
    // position: relative;
    display: flex;
    align-items: center;
    padding-left: 16px;
    padding-right: 16px;

    img {
      width: 55px;
      height: 55px;
      // position: absolute;
      // top: 25%;
      // left: 10%;
    }
  }

  .pageTop-right {
    height: 115px;
    border-radius: 20px;
    background: #e9f0fd;
    width: calc((100% - 24px)/2);
    margin-left: 12px;
    display: flex;
    align-items: center;
    padding-left: 16px;
    padding-right: 16px;

    img {
      width: 55px;
      height: 55px;
    }
  }
  .pageTop_act{
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.2);
  }

  .middle_text {
    // position: absolute;
    text-align: left;
    margin-left: 12px;
  }

  .middle_text_num {
    font-size: 25px;
    color: #000000;
  }

  .middle_text_name {
    font-size: 15px;
    color: #000000;
    display:flex;
    align-items: center;
  }

  .middle_right_text {
    margin-left: 12px;

    .middle_text_num {
      font-size: 25px;
      color: #000000;
    }

    .middle_text_name {
      font-size: 15px;
      color: #000000;
    }
  }
}
// 页面内容  标题
.content_Title{
  margin-top: 129px;
  display: flex;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e5e5;
  .content_Title_text{
    color: #000000;
    font-size: 15px;
    text-align: left;
  }
  .endTime{
    color: #999999;
    font-size: 10px;
  }
}
.content_Item_List{
  background-color: #f9f9f9;
  height: 100%;
  overflow: auto;

  .content_Item{
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    margin-bottom: 5px;

    .content_Item_left{
      display: flex;
      align-items: center;

      .item_img{
        img{
          width: 22px;
          height: 22px;
        }
      }
      .content_Item_name{
        font-size: 14px;
        text-align: left;
        color: #000000;
        margin-left: 14px;
        line-height: 14px;
      }
    }
    .content_Item_right{
      font-size:12px;
      line-height: 12px;
      text-align: left;
      color: #999999; 
      display: flex;
      align-items: center;
      
    }
  }
}

//已填报 数据样式
.recordItem {
    background-color: #ffffff;
    padding-bottom: 5px;
    margin-bottom: 5px;
  .recordItem_bg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
  }

  .recordItemL {
    display: flex;
    align-items: center;
  }

  .recordItemL-left {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    img {
      width: 22px;
      height: 22px;
    }

  }

  .recordItemL-right {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-left: 12px;

    .recordItemL-right-text {
      font-size: 14px;
      color: #000000;
      text-align: left;
    }
  }

  .recordItemR {
    display: flex;
    align-items: center;

    .recordItemR-left {
      .recordItemR-left-num {
        color: #666666;
        font-size: 14px;
      }

      .recordItemR-left-price {
        color: #000000;
        font-size: 14px;
      }
    }


    .recordItemR-right {
      margin-left: 12px;
    }
  }
}
.recordItem:last-child {
    margin-bottom: 0px;
}

.details_box {
    // padding: 0px 24px 12px 24px;
    margin: 0px 24px;
    // padding: 12px 0px;
}

.goods-box {
    background-color: #ffffff;
    // padding: 12px 24px 12px 34px;
    padding: 12px 0px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
    justify-content: space-between;

    .goods-title {
        font-size: 12px;
        line-height: 12px;
        text-align: left;
        color: #000000;
    }

    .goods-num {
        display: flex;
        align-items: center;

        .selectnum {
            font-size: 12px;
            text-align: center;
            color: #000000;
            margin: 0px 3px;
        }
    }
}

// 无数据
.empty_content{
    height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: #000000;
    font-size: 16px;
}
</style>
